import { getCurrentUse } from '@/pages/User/Setting/_mock';
import { update } from '@/services/ant-design-pro/userController';
import { useModel } from '@@/exports';
import { UploadOutlined } from '@ant-design/icons';
import { ProForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { Button, message, Upload } from 'antd';
import React from 'react';
import useStyles from './index.style';
import {flushSync} from "react-dom";

// const validatorPhone = (rule: any, value: string[], callback: (message?: string) => void) => {
//   if (!value[0]) {
//     callback('Please input your area code!');
//   }
//   if (!value[1]) {
//     callback('Please input your phone number!');
//   }
//   callback();
// };

const BaseView: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');

  const { styles } = useStyles();
  // 头像组件 方便以后独立，增加裁剪之类的功能
  const AvatarView = ({ avatar }: { avatar: string }) => (
    <>
      <div className={styles.avatar_title}>头像</div>
      <div className={styles.avatar}>
        <img src={avatar} alt="avatar" />
      </div>
      <Upload showUploadList={false}>
        <div className={styles.button_view}>
          <Button>
            <UploadOutlined />
            更换头像
          </Button>
        </div>
      </Upload>
    </>
  );
  const { data: currentUser, loading } = {
    data: {
      ...getCurrentUse(),
      ...initialState?.currentUser,
    },
    loading: initialState?.loading,
  };
  const getAvatarURL = () => {
    if (currentUser) {
      if (currentUser.userAvatar) {
        return currentUser.userAvatar;
      }
      const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
      return url;
    }
    return '';
  };
  const handleFinish = async (value: API.UserEntity) => {
    const res = await update({
      id: currentUser?.id,
      ...value,
    });
    if (res?.code === 200){
      // @ts-ignore
      const currentDataUser = await initialState?.fetchUserInfo() || currentUser
      flushSync(() => {
        setInitialState((s) => ({ ...s, currentUser: currentDataUser }));
      });
      message.success("更新成功");
      return;
    }
    message.error(res?.message)
  };
  return (
    <div className={styles.baseView}>
      {loading ? null : (
        <>
          <div className={styles.left}>
            <ProForm
              layout="vertical"
              onFinish={handleFinish}
              submitter={{
                searchConfig: {
                  submitText: '更新基本信息',
                },
                render: (_, dom) => dom[1],
              }}
              initialValues={{
                ...currentUser,
                phone: currentUser?.phone.split('-'),
              }}
              hideRequiredMark
            >
              <ProFormText
                width="md"
                name="userAccount"
                label="邮箱账号"
                disabled={true}
                rules={[
                  {
                    required: true,
                    message: '请输入您的邮箱!',
                  },
                ]}
              />
              <ProFormText
                width="md"
                name="userName"
                label="昵称"
                rules={[
                  {
                    required: true,
                    message: '请输入您的昵称!',
                  },
                ]}
              />
              <ProFormSelect
                width="sm"
                name="gender"
                label="性别"
                rules={[
                  {
                    required: true,
                    message: '请选择您的性别!',
                  },
                ]}
                options={[
                  {
                    label: '未知',
                    value: 0,
                  },
                  {
                    label: '男',
                    value: 1,
                  },
                  {
                    label: '女',
                    value: 2,
                  },
                ]}
              />
              <ProFormTextArea
                name="userProfile"
                label="个人简介"
                rules={[
                  {
                    required: true,
                    message: '请输入个人简介!',
                  },
                ]}
                placeholder="个人简介"
              />
              {/*<ProFormSelect*/}
              {/*  width="sm"*/}
              {/*  name="country"*/}
              {/*  label="国家/地区"*/}
              {/*  rules={[*/}
              {/*    {*/}
              {/*      required: true,*/}
              {/*      message: '请输入您的国家或地区!',*/}
              {/*    },*/}
              {/*  ]}*/}
              {/*  options={[*/}
              {/*    {*/}
              {/*      label: '中国',*/}
              {/*      value: 'China',*/}
              {/*    },*/}
              {/*  ]}*/}
              {/*/>*/}

              {/*<ProForm.Group title="所在省市" size={8}>*/}
              {/*  <ProFormSelect*/}
              {/*    rules={[*/}
              {/*      {*/}
              {/*        required: true,*/}
              {/*        message: '请输入您的所在省!',*/}
              {/*      },*/}
              {/*    ]}*/}
              {/*    width="sm"*/}
              {/*    fieldProps={{*/}
              {/*      labelInValue: true,*/}
              {/*    }}*/}
              {/*    name="province"*/}
              {/*    className={styles.item}*/}
              {/*    request={async () => {*/}
              {/*      return queryProvince().then(({ data }) => {*/}
              {/*        return data.map((item) => {*/}
              {/*          return {*/}
              {/*            label: item.name,*/}
              {/*            value: item.id,*/}
              {/*          };*/}
              {/*        });*/}
              {/*      });*/}
              {/*    }}*/}
              {/*  />*/}
              {/*  <ProFormDependency name={['province']}>*/}
              {/*    {({ province }) => {*/}
              {/*      return (*/}
              {/*        <ProFormSelect*/}
              {/*          params={{*/}
              {/*            key: province?.value,*/}
              {/*          }}*/}
              {/*          name="city"*/}
              {/*          width="sm"*/}
              {/*          rules={[*/}
              {/*            {*/}
              {/*              required: true,*/}
              {/*              message: '请输入您的所在城市!',*/}
              {/*            },*/}
              {/*          ]}*/}
              {/*          disabled={!province}*/}
              {/*          className={styles.item}*/}
              {/*          request={async () => {*/}
              {/*            if (!province?.key) {*/}
              {/*              return [];*/}
              {/*            }*/}
              {/*            return queryCity(province.key || '').then(({ data }) => {*/}
              {/*              return data.map((item) => {*/}
              {/*                return {*/}
              {/*                  label: item.name,*/}
              {/*                  value: item.id,*/}
              {/*                };*/}
              {/*              });*/}
              {/*            });*/}
              {/*          }}*/}
              {/*        />*/}
              {/*      );*/}
              {/*    }}*/}
              {/*  </ProFormDependency>*/}
              {/*</ProForm.Group>*/}
              {/*<ProFormText*/}
              {/*  width="md"*/}
              {/*  name="address"*/}
              {/*  label="街道地址"*/}
              {/*  rules={[*/}
              {/*    {*/}
              {/*      required: true,*/}
              {/*      message: '请输入您的街道地址!',*/}
              {/*    },*/}
              {/*  ]}*/}
              {/*/>*/}
              {/*<ProFormFieldSet*/}
              {/*  name="phone"*/}
              {/*  label="联系电话"*/}
              {/*  rules={[*/}
              {/*    {*/}
              {/*      required: true,*/}
              {/*      message: '请输入您的联系电话!',*/}
              {/*    },*/}
              {/*    {*/}
              {/*      validator: validatorPhone,*/}
              {/*    },*/}
              {/*  ]}*/}
              {/*>*/}
              {/*  <Input className={styles.area_code} />*/}
              {/*  <Input className={styles.phone_number} />*/}
              {/*</ProFormFieldSet>*/}
            </ProForm>
          </div>
          <div className={styles.right}>
            <AvatarView avatar={getAvatarURL()} />
          </div>
        </>
      )}
    </div>
  );
};
export default BaseView;
